<template>
  <div style="position: relative">
    <v-menu
      v-model="pop"
      fixed
      offset-y
      max-width="320"
      max-height="500"
      :close-on-content-click='false'
      style="right:100px;"
      z-index="15"
    >
      <template v-slot:activator="{ attrs }">
        <v-text-field
          outlined
          :dense="dense"
          clearable
          :placeholder="placeholder"
          readonly
          v-bind="{...attrs,...bind}"
          v-model="currentValue"
          :prepend-inner-icon="currentValue === ''? null : currentValue"
          append-icon="view_list"
          @click:append="handleAppendClick"
          @click:clear="handleClearClick"
        ></v-text-field>
      </template>

      <div style="background: white;max-height:400px;overflow: auto;top:5px">
        <v-expansion-panels>
          <v-expansion-panel
            v-for="(e,i) in icon" 
            :key="i"
          >
            <v-expansion-panel-header>{{e.title}}</v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-icon v-for="(icon,index) in e.icon" :key="i + index" style="padding:5px" @click="setIconValue(icon)">
                {{icon}}
              </v-icon>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </div>
    </v-menu>
  </div>
</template>

<script>
import icon from './data/index'
export default {
  name: 'v-icon-select',
  props: {
    // 值
    value: {
      type: String,
      required: false,
      default: ''
    },
    // 占位符
    placeholder: {
      type: String,
      required: false,
      default: '请选择'
    },
    
    // 是否可清空
    clearable: {
      type: Boolean,
      required: false,
      default: true
    },
    // 是否在选择后自动关闭
    autoClose: {
      type: Boolean,
      required: false,
      default: true
    },
    // 大小
    dense: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 绑定弹出框
      pop: false,
      // 所有图标
      icon,
      // 组件内输入框的值
      currentValue: '',
      // 搜索的文字
      searchText: '',
      // 不是搜索的时候显示的折叠面板绑定的展开数据
      collapseActive: []
      // collapseActive: [...Array(icon.length)].map((e, i) => i)
    }
  },
  computed: {
    // 输入框上绑定的设置
    bind () {
      return {
        placeholder: this.placeholder,
        clearable: this.clearable,
        ...this.$attrs
      }
    },
    // 是否在搜索
    searchMode () {
      return !!this.searchText
    },
    // 过滤后的图标
    iconFilted () {
      return this.icon.map(iconClass => ({
        title: iconClass.title,
        icon: iconClass.icon.filter(icon => icon.indexOf(this.searchText) >= 0)
      })).filter(iconClass => iconClass.icon.length > 0)
    }
  },
  watch: {
    value (value) {
      this.currentValue = value
    }
  },
  created () {
    this.currentValue = this.value
  },
  methods: {
    handleAppendClick(){
      this.pop = !this.pop
    },
    setIconValue(icon){
      this.$emit('input', icon)
      this.currentValue = icon
      if (icon && this.autoClose) {
        this.pop = false
      }
    },
    handleClearClick(){
      this.$emit('input', '')
    },
    selectIcon (iconName = '') {
      this.$emit('input', iconName)
      if (iconName && this.autoClose) {
        this.pop = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
